<template>
  <div>
    <el-card class="box-card">
      <!-- 头部区域 -->
      <template #header>
        <div class="header">
          <span>课程信息管理</span>
          <div class="extra">
            <el-button type="primary" icon="el-icon-plus" @click="drawer = true">添加课程</el-button>
          </div>
        </div>
      </template>
      <!-- 搜索表单 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="课程名">
          <el-input v-model="tableData.courseName" placeholder="课程名称"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker v-model="tableData.startTime" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getCouInfo">查询</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 课程列表 -->
      <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="id" label="课程ID" width="200px"></el-table-column>
        <el-table-column prop="courseName" label="课程名称" width="200px"></el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="200px"></el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="200px"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button class="btn" type="success" icon="el-icon-reading" circle size="small"
              @click="share(scope.row.id)"></el-button>
            <el-button class="btn" type="primary" icon="el-icon-edit" circle size="small" style="margin-right: 10px;"
              @click="edit(scope.row)"></el-button>
            <el-button class="btn" type="danger" icon="el-icon-delete" circle size="small"
              @click="handleDelete(scope.row.id)"></el-button>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="没有数据" />
        </template>
      </el-table>
      <!-- 分页条 -->
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="this.pageNum" :page-sizes="[2, 3, 5, 10]" :page-size=this.pageSize
          layout="total, sizes, prev, pager, next, jumper" :total=this.total>
        </el-pagination>
      </div>
      <!-- 抽屉 -->
      <el-drawer :title="title" :visible.sync="drawer" :direction="direction" class="addform">

        <el-form ref="form" :model="form" label-width="80px">

          <el-form-item label="课程名称">
            <el-input v-model="form.courseName"></el-input>
          </el-form-item>

          <el-form-item label="开始时间">
            <el-date-picker v-model="form.startTime" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="结束时间">
            <el-date-picker v-model="form.endTime" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="备注">
            <el-input v-model="form.remark"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="drawer = false">取消</el-button>
          </el-form-item>

        </el-form>

      </el-drawer>
      <!-- 分配课程对话框 -->
      <el-dialog title="课程分配" :visible.sync="dialog" width="30%">
        <el-form :model="shareCourse" label-width="80px">
          <el-form-item label="教师：">
            <el-select v-model="shareCourse.teaid" placeholder="请选择授课老师">
              <el-option v-for="t in tea" :key="t.teaid" :label="t.name" :value="t.teaid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级：">
            <el-select v-model="shareCourse.classid" placeholder="请选择授课班级">
              <el-option v-for="c in cls" :key="c.classid" :label="c.classname" :value="c.classid"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog = false, clean()">取 消</el-button>
          <el-button type="primary" @click="addshare">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {

  data() {
    return {
      form: {
        id: '',
        courseName: '',
        startTime: '',
        endTime: '',
        remark: ''
      },
      //分配课程数据模型
      shareCourse: {
        courseid: '',
        teaid: '',
        classid: ''
      },
      //班级数据模型
      cls: {
        classid: '',
        classname: ''
      },
      //教师数据模型
      tea: {
        teaid: '',
        name: ''
      },
      dialog: false,
      drawer: false,
      direction: 'rtl',
      title: '新增课程',

      tableData: [{
        courseName: '',
        startTime: '',
        endTime: '',
        remark: ''
      }],
      pageNum: 1,
      pageSize: 2,
      total: 10,
    }
  },

  created() {
    this.getCouInfo()
    this.getClassInfo()
    this.getTeaInfo()

  },

  methods: {
    //课程分配添加方法
    addshare() {
      request.post("/share/add", this.shareCourse).then(res => {
        if (res.data.code == '0') {
          this.$message.success("课程分配成功")
          this.dialog = false
          this.cleansharecourse()
        } else {
          this.$message.error(res.data.message)
          this.dialog = false
        }
      })
    },
    clean() {
      this.shareCourse.classid = '',
        this.shareCourse.teaid = ''
    },
    //获取班级信息
    getClassInfo() {
      request.get("/class/find").then(res => {
        if (res.data.code == '0') {
          this.cls = res.data.data
        } else {
          this.$message.error("获取班级信息失败")
        }
      })
    },
    //获取教师信息
    getTeaInfo() {
      request.get("/tea/find").then(res => {
        if (res.data.code == '0') {
          this.tea = res.data.data
        } else {
          this.$message.error("获取教师信息失败")
        }
      })
    },
    //分配按钮
    share(id) {
      console.log(id)
      this.shareCourse.courseid = id
      this.dialog = true
    },
    //清理数据模型
    cleanfrom() {
      this.form.courseName = '',
        this.form.startTime = '',
        this.form.endTime = '',
        this.form.remark = ''
    },
    //清理数据
    cleansharecourse() {
      this.shareCourse.courseid = '',
        this.shareCourse.classid = '',
        this.shareCourse.teaid = ''
    },
    //搜素表单重置
    reset() {
      this.getCouInfo()
    },
    //获取课程信息
    getCouInfo() {
      request.get("/course", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          courseName: this.tableData.courseName,
          startTime: this.tableData.startTime,
        }
      }).then(res => {
        if (res.data.code == '0') {
          console.log(res.data)
          this.$message.success("成功获取课程信息")
          this.tableData = res.data.data.list
          this.total = res.data.data.total
        } else {
          this.$message.error("获取课程信息失败")
        }
      })
    },
    //新增
    onSubmit() {
      request.post("/course", this.form).then(res => {

        if (res.data.code == '0') {
          this.$message.success("添加成功")
          this.drawer = false;
          this.cleanfrom();
          this.getCouInfo();
        } else {
          this.$message.error("添加失败")
        }

      })
    },
    //删除
    handleDelete(id) {
      this.$confirm('是否删除这个课程信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.delete("/course", {
          params: {
            id: id
          }
        }).then(res => {
          if (res.data.code == '0') {
            this.$message.success("删除成功")
            this.getCouInfo()
          } else {
            this.$message.error("删除失败")
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //编辑方法
    edit(obj) {
      this.title = "修改课程",
        this.form = obj;
      this.drawer = true

    },

    //分页方法
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      console.log(pageSize)
      this.getCouInfo()
    },

    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.getCouInfo()
      console.log(pageNum)
    },
    //变色
    tableRowClassName({ rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },


  }
}
</script>

<style scoped lang="less">
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 列表css */
.el-table .warning-row {
  background: rgb(136, 122, 95);
}

.el-table .success-row {
  background: #a4ca90;
}

.addform {
  .el-input {
    margin-left: 10px;
    width: 70%;
  }
}

/* 分页条 */
.block {
  margin-top: 30px;
}
</style>
